{% load i18n %}
{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta charset="UTF-8">
    <title>{% trans 'Register' %}</title>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dot/2.0.0-beta.0/doT.min.js"></script>

    <script src="{% url 'javascript-catalog' %}"></script>
    <script src="{% url 'site_urls' %}"></script>
    <script src="{% static 'js/vendor/main.js' %}"></script>
    <script src="{% static 'js/vendor/jquery.preloader.min.js' %}"></script>
{#    <script src="{% static 'js/vendor/_resolver.js' %}"></script>#}
</head>
<body>
    <div id="wrap">
        <div class="container">
            <div class="row self_row">
                <div class="col-md-3">
{#                    <img class="login_img" src="{% static 'image/login.jpg' %}">#}
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <a href="{% url 'site_index' %}"><img class="title_img" src="{% static 'image/111_write.png' %}"></a>
                            <h2>{% trans 'Register' %}</h2>
                        </div>{# panel heading #}
                        <div class="panel-body">
                            <form class="form-horizontal" id="register-form">
                                <div class="form-group">
                                    <label for="username" class="col-sm-4 control-label">{% trans 'Username' %}</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="username" name="username" placeholder="{% trans 'Input your username' %}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="password" class="col-sm-4 control-label">{% trans 'Password' %}</label>
                                    <div class="col-sm-8">
                                        <input type="password" class="form-control" id="password" name="password" placeholder="{% trans 'Input your password' %}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="password_again" class="col-sm-4 control-label">{% trans 'Password again' %}</label>
                                    <div class="col-sm-8">
                                        <input type="password" class="form-control" id="password_again" name="password_again" placeholder="{% trans 'Input your password again' %}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="real_name" class="col-sm-4 control-label">{% trans 'Real name' %}</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="real_name" name="real_name" placeholder="{% trans 'Input your real name' %}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="col-sm-4 control-label">{% trans 'Email' %}</label>
                                    <div class="col-sm-8">
                                        <input type="email" class="form-control" id="email" name="email" placeholder="{% trans 'Input your email' %}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="institution" class="col-sm-4 control-label">{% trans 'Institution' %}</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="institution" name="institution" placeholder="{% trans 'Input your organization' %}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-4 col-sm-8">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" id="agreed">
                                                {% trans 'I have read and agree to' %}
                                                <a role="button" data-toggle="modal" data-target="#useModal"
{#                                          href="{% static 'user-agreement/agreement.html' %}">{% trans 'the Terms of Use' %}</a>#}
                                                href="{% static 'user-agreement/' %}{{ LANGUAGE_CODE|slice:'2' }}.html">{% trans 'the Terms of Use' %}</a>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-4 col-sm-8">
                                        <button type="submit" class="btn btn-primary register_btn" id="register-button">{% trans 'Register' %}</button>
                                    </div>
                                </div>
                            </form>
                        </div>{# panel body #}
                        <div class="panel-footer">
                            <a href="{% url 'accounts:login' %}">{% trans 'Have an account? Click here to login.' %}</a>
                        </div>{# panel footer #}
                    </div>{# panel #}
                </div>
                <div class="col-md-3">
                </div>
            </div>{# row #}
        </div>{# container #}
    </div> {# wrap #}

    <!-- Modal -->
    <div class="modal fade" id="useModal" tabindex="-1" role="dialog" aria-labelledby="useModalLongTitle" aria-hidden="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
{#              <div class="modal-header">#}
{#                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">#}
{#                    <span aria-hidden="true">&times;</span>#}
{#                  </button>#}
{#                  <h4 class="modal-title" id="useModalLongTitle">User agreement</h4>#}
{#              </div>#}
{#              <div class="modal-body">#}
{#              <h4> 1. Accept Terms </h4>#}
{#              <p>MGEDATA (hereinafter referred to as "MGEDATA") according to the following terms of service to provide you with services.#}
{#                These terms can be updated at any time without notice.#}
{#                MGEDATA use of the agreement (hereinafter referred to as the "use of the agreement") in the event of changes,#}
{#                MGEDATA will be posted on the page changes.#}
{#                The revised agreement on the use of the agreement once published on the website#}
{#                that is effective to replace the original agreement.#}
{#                In addition, when you use the MGEDATA special service,#}
{#                you and MGEDATA comply with the relevant guidelines and rules promulgated by MGEDATA anytime.#}
{#                All of the foregoing guidelines and rules form part of this Use Agreement. </p>#}
{#              <p> Before you use the services provided by MGEDATA, you should read this agreement carefully.#}
{#                If you do not agree to the use of the agreement and / or its amendment at any time,#}
{#                  please immediately stop using all the services provided by MGEDATA;#}
{#                Once you use the MGEDATA service, you are deemed to have understood and fully agree with the contents of this Use Agreement,#}
{#                Including MGEDATA on the use of the agreement at any time to make any changes,#}
{#                  and become MGEDATA users (hereinafter referred to as "users"). </p>#}
{##}
{#              <h4> 2. Service Description </h4>#}
{#              <p> MGEDATA currently offers users the following services:#}
{#                  posting and sharing reviews of books, movies, music; collecting books, movies, music;#}
{#                Publish topics in the watercress, diary, upload pictures; posted in the city or participate in various activities.#}
{#                Except as otherwise expressly provided in this EULA,#}
{#                  any new functionality currently added to or augmented by this EULA may be added,#}
{#                Including the introduction of new products, are subject to the terms of this use agreement.#}
{#                  YOU UNDERSTAND AND AGREE THAT THIS SERVICE IS PROVIDED ONLY ON ITS CURRENT PRESENCE,#}
{#                For any user information or personal settings aging, delete, delivery error,#}
{#                  not stored or any other problems, MGEDATA are not responsible for any.#}
{#                MGEDATA reserves the right to suspend any part of the service for maintenance,#}
{#                  upgrades or other purposes without prior notice. </p>#}
{##}
{#              <h4> 3. Comply with law </h4>#}
{#              <p> You agree to abide by all the provisions of the relevant laws and regulations of the People's Republic of China,#}
{#                And is solely responsible for any actions that may result#}
{#                  from using the service in any way with your password and your account.#}
{#                If your conduct violates any of the provisions of national laws and regulations and may constitute a crime,#}
{#                Will be held criminally responsible, and you assume full legal responsibility. </p>#}
{#              <p> In the meantime, if MGEDATA reasonably believes that any of your actions,#}
{#                INCLUDING, BUT NOT LIMITED TO, ANY CONTENT, WHETHER IN ANYWEEK, WHATSOEVER,#}
{#                  WHATSOEVER TO ANY OF YOUR DISCLAIMED AND OTHER NON-INFRINGEMENT,#}
{#                MGEDATA may terminate the service to you at any time without any prior notice. </p>#}
{##}
{#              <h4> 4. Your Registration Duty </h4>#}
{#              <p> In order to be able to use this service, you agree to the following:#}
{#                  You are requested to fill in the correct registered email, password and name,#}
{#                And to ensure the future update of the login mailbox, name,#}
{#                  picture and other information the validity and legitimacy.#}
{#                If you provide any illegal, immoral or watercress#}
{#                  does not think suitable for display on the watercress information;#}
{#                Or MGEDATA reasonably suspect that your information belongs to the program or malicious operation,#}
{#                  MGEDATA have the right to suspend or terminate your account,#}
{#                And refuse you to use all or any part of the Service for the present and future. </p>#}
{#              <p> Watercress does not assume any responsibility for any registration information of any user,#}
{#                Including but not limited to the responsibility of identifying, verifying the authenticity, correctness,#}
{#                  completeness, suitability and / or availability of any registration information. </p>#}
{#              </div>#}
{#              <div class="modal-footer">#}
{#                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>#}
{#                <button type="button" class="btn btn-primary" onclick="$('#agreed').prop('checked', true);$('#useModal').modal('toggle');">Agree and use</button>#}
{#              </div>#}
          </div>
      </div>
    </div>

    <link rel="stylesheet" href="{% static 'css/accounts/register.css' %}">

    <script src="{% static 'js/vendor/formValidation.min.js' %}"></script>
    <script src="{% static 'js/vendor/formValidation.bootstrap.min.js' %}"></script>
    <script src="{% static 'js/accounts/register.js' %}"></script>
</body>
</html>